<template>
    <div id="GoodsList">
        <p>{{title}}</p>
         <ul>
            <li v-for="(item,key) in goodsList" :key="key" @click="startsearch(item)">
                {{item}}
            </li>
        </ul>
    </div>
</template>

<script>
export default {
    props: {
        goodsList: {
            type: [Array]
        },
        title:{
            type:String
        }
    },
    methods:{
        startsearch(item){
            this.$store.state.searchkeyword=item;
            this.$router.push({path:"/searchResult"});
        }
    }
}
</script>

<style lang="scss" scoped>
 #GoodsList{
    width: 100%;
    height: 100%;
    padding: 10px;
    p{
        color: black;
        font-size: 16px;
    }
    ul{
        width: 100%;
        height: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        li{
            display: flex;
            font-size: 10px;
            padding:4px 11px;
            margin: 5px 6px;
            border-radius: 8px;
            background: lightgrey;
        }
    }
 }
</style>
